import React, { Component } from "react";

export default class App extends Component {
  // 状态数据:
  state = {
    uname: "",
  };
  doUnameChange = (e) => {
    console.log("----输入改变了----");
    // console.log(e); //React 模拟出来的 "事件" 对象
    // console.log(e.target);  //通过事件对象找到 "事件源"
    // console.log(e.target.value);  //通过事件源找到用户输入的值
    // 把用户的最新输入赋值给状态变量 -- 此时正在控制着输入框的内容
    let uname = e.target.value;
    // uname = uname.toUpperCase();  //把用户的所有的输入转为大写形式
    // uname = uname.trim(); // 禁止用户输入空白字符
    // uname = uname.substring(0, 6); //只允许用户输入6个字符
    uname = parseInt(uname); //只允许用户输入整数字
    if (!isNaN(uname)) {
      //isNaN()判断一个数字是否为 "非数字"
      this.setState({ uname });
    } else {
      this.setState({ uname: 0 });
    }
  };
  render() {
    return (
      <div>
        {/* React认为: 每个输入框数据来源应该只有一个!要么是用户输入,要么是状态数据!但不是二者都有! -- 这种组件叫 "受控组件" */}
        <input value={this.state.uname} onChange={this.doUnameChange} />
        <hr />
        <span>用户当前的输入:{this.state.uname}</span>
      </div>
    );
  }
}
